<template>
	<div class="tree-box">
		<div class="tree-head">
			<span class="title">公司组织结构</span>
			<!-- <span>
				<el-checkbox
					v-model="checkeAll"
					label="全选"
					size="large"
					@change="checkHandler"
				/>
			</span> -->
		</div>
		<div class="tree-container">
			<el-tree
				v-if="treeData.length"
				ref="treeRef"
				:data="treeData"
				:default-checked-keys="defaultKey"
				show-checkbox
				default-expand-all
				:props="defaultProps"
				node-key="departmentId"
				@check="nodeCheck"
			/>
			<el-empty description="暂无数据" v-else />
		</div>
	</div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElTree, ElCheckbox, ElEmpty } from "element-plus";

const props = defineProps({
	data: {
		type: Array,
	},
});

// ---全选---
let checkeAll = ref(false);
let checkHandler = (val) => {
	if (val) {
		treeRef.value.setCheckedNodes(treeData.value);
	} else {
		treeRef.value.setCheckedNodes([]);
	}
	emits("checkedKeys", treeRef.value.getCheckedKeys());
};

const defaultProps = {
	label: "departmentName",
	children: "children",
};

// ---树形数据---
let treeData = ref([]);

// ---树形dom---
let treeRef = ref(null);

// ---存放父级id，用于全选参数改变---
let parentIds = ref([]);

// ---默认选中部门id---
let defaultKey = ref([]);
let getDefaultKey = (arr) => {
	if (arr[0].children.length) {
		getDefaultKey(arr[0].children);
	} else {
		defaultKey.value = [arr[0].departmentId];
		emits("checkedKeys", [arr[0].departmentId]);
	}
};

// ---节点点击---点击节点复选框之后触发
let nodeCheck = (node, currentState) => {
	treeRef.value.setCheckedNodes([
		{
			departmentId: node.departmentId,
			label: node.departmentName,
		},
	]);
	// let signArr = parentIds.value.filter((el) => {
	// 	return currentState.checkedKeys.indexOf(el) >= 0;
	// });
	// if (signArr.length === parentIds.value.length) {
	// 	checkeAll.value = true;
	// } else {
	// 	checkeAll.value = false;
	// }
	emits("checkedKeys", [node.departmentId]);
};
watch(
	() => props.data,
	(val) => {
		// console.log(val, "------leftTree-----");
		if (val.length) {
			treeData.value = val;
			getDefaultKey(treeData.value);
			// treeData.value.forEach((el) => {
			// 	parentIds.value.push(el.departmentId);
			// });
		}
	}
);
let emits = defineEmits("checkedKeys");
</script>
<style lang="scss" scoped>
.tree-box {
	border-radius: 6px;
	border: 1px solid #e3e7f1;
	padding: 20px 20px;
	height: calc(100% - 2px);
	.tree-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		border: 1px solid #e3e7f1;
		padding: 10px 20px;
		.title {
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: bold;
			color: #000000;
			line-height: 21px;
		}
		:deep(.el-checkbox) {
			flex-direction: row-reverse;
			.el-checkbox__label {
				color: #000000;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				padding-left: 0;
				padding-right: 5px;
			}
		}
	}
	.tree-container {
		margin-top: 20px;
		height: calc(100% - 55px);
		overflow-y: auto;
		:deep(.el-tree) {
			.el-checkbox__inner {
				border-radius: 1px;
				border: 1px solid #e3e7f1;
			}
			.el-tree-node__label {
				font-size: 16px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				color: #000000;
				line-height: 20px;
			}
		}
	}
}
</style>
